<template>
  <div class="area-select">
    <el-select
      size="mini"
      v-model="type"
      @change="onChangeType"
      class="area-type"
      popper-class="area-popper"
    >
      <el-option
        v-for="item in typeOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-cascader
      v-if="type == 'grid'"
      key="grid"
      size="mini"
      v-model="gridValue"
      :props="{ checkStrictly: true }"
      placeholder="请选择"
      :options="areaOptions"
      filterable
      class="area-value"
      popper-class="area-popper"
      @change="changeGridValue"
    >
      <template slot-scope="{ data }">
        <div @click="changeGrid(data)">
          <span>{{ data.label }}</span>
        </div>
      </template></el-cascader
    >
    <el-cascader
      v-else
      key="region"
      :options="regionData"
      :props="{ checkStrictly: true }"
      @change="changeValue"
      v-model="regionValue"
      filterable
      size="mini"
      class="area-value"
      popper-class="area-popper"
    >
      <template slot-scope="{ data }">
        <div @click="changeRegion(data)">
          <span>{{ data.label }}</span>
        </div>
      </template>
    </el-cascader>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Watch } from "vue-property-decorator";
import { searchFeatures } from "@/assets/modules/areaUtils";
import exportVue from "@/assets/modules/exportVue";
import { getGridList } from "@/assets/modules/service";
@Component({
  name: "areaSelect",
  components: {}
})
export default class extends Vue {
  get datePickerValue() {
    return this.$store.getters["panelData/datePickerValue"];
  }
  get floorGridId() {
    return this.$store.getters["panelData/floorGridId"];
  }
  typeOptions: any[] = [];
  type = "grid";
  areaOptions: any[] = [];
  areaValue = "";
  regionConfig: any[] = [];
  regionData: any = [];
  tempData: any[] = [];
  regionValue: any = [];
  gridValue: any = [];
  city: any = {
    value: "city",
    code: "city",
    label: "厦门市",
    url: "",
    xzqdm: "",
    xzqmc: ""
  };
  mounted() {
    const win: any = window;
    this.typeOptions = win.dataConfig.area.typeOptions;
    this.regionConfig = win.urlConfig.regionConfig;
    this.getData();
    this.getGridList();
    this.$store.commit("panelData/setAreaType", this.type);
  }
  onChangeType() {
    const win: any = window;
    if (this.type == "administrative") {
      if (this.regionData.length > 0) {
        this.regionValue = [this.regionData[0].value];
        this.changeRegion(this.regionData[0]);
        console.log(this.regionValue);
      }
    } else {
      if (this.areaOptions.length > 0) {
        this.gridValue = [this.areaOptions[0].value];
        this.changeGrid(this.areaOptions[0]);
        console.log(this.gridValue);
      }
    }
    this.$store.commit("panelData/setAreaType", this.type);
    this.$store.commit("panel/setDialogShow", false);
  }
  getData() {
    const i = 0;
    this.regionData = [];
    if (i < this.regionConfig.length) {
      const regionUrl = this.regionConfig[i].url;
      const where = "1=1";
      const xzqdm = this.regionConfig[i].code;
      const xzqmc = this.regionConfig[i].name;
      let tmpData: any[] = [];
      searchFeatures(regionUrl, where).then((res: any) => {
        if (res.length > 0) {
          res.forEach((feature: any) => {
            const param: any = {
              value: feature.attributes.OBJECTID,
              code: feature.attributes[xzqdm],
              label: feature.attributes[xzqmc],
              url: regionUrl,
              xzqdm: xzqdm,
              xzqmc: xzqmc
            };
            tmpData.push(param);
          });
          tmpData = tmpData.sort((a: any, b: any) => {
            return a.value - b.value;
          });
          this.tempData.push(tmpData);
          if (i < this.regionConfig.length - 1) {
            this.getSubData(i + 1);
          } else {
            this.tempData[0].unshift(this.city);
            this.regionData = this.tempData[0];
          }
        } else {
          this.regionData.push(this.city);
        }
      });
    } else {
      this.regionData.push(this.city);
    }
  }
  getSubData(index: number) {
    let tmpData: any[] = [];
    const regionUrl = this.regionConfig[index].url;
    const where = "1=1";
    const xzqdm = this.regionConfig[index].code;
    const xzqmc = this.regionConfig[index].name;
    const parentdm = this.regionConfig[index].parentCode;
    searchFeatures(regionUrl, where).then((res: any) => {
      if (res.length > 0) {
        res.forEach((feature: any) => {
          const param: any = {
            value: feature.attributes.OBJECTID,
            code: feature.attributes[xzqdm],
            label: feature.attributes[xzqmc],
            parentValue: feature.attributes[parentdm],
            url: regionUrl,
            xzqdm: xzqdm,
            xzqmc: xzqmc
          };
          tmpData.push(param);
        });
        tmpData = tmpData.sort((a: any, b: any) => {
          return a.value - b.value;
        });
        this.tempData.push(tmpData);
        if (index < this.regionConfig.length - 1) {
          this.getSubData(index + 1);
        } else {
          for (let i = this.tempData.length - 1; i > 0; i--) {
            this.tempData[i - 1].forEach((item: any) => {
              item.children = [];
              this.tempData[i].forEach((subitem: any) => {
                if (subitem.parentValue === item.code) {
                  item.children.push(subitem);
                }
              });
            });
          }
          this.tempData[0].unshift(this.city);
          this.regionData = this.tempData[0];
        }
      }
    });
  }

  changeValue() {
    console.log(this.regionValue);
    this.$store.commit("panel/setDialogShow", false);
    if (this.regionValue.length > 0) {
      if (this.regionValue[0] == "city") {
        this.$store.commit("view/setRestoration", true);
        exportVue.$emit("area-select-city", this.regionConfig[0].url);
      } else {
        const value = this.regionValue[this.regionValue.length - 1];
        this.tempData[this.regionValue.length - 1].find((item: any) => {
          if (item.value === value) {
            const sqCodeList =
              this.regionValue.length == 3
                ? item.code
                : this.regionValue.length == 2
                ? item.children
                    .map((el: any) => {
                      return el.code;
                    })
                    .join(",")
                : item.children
                    .map((el: any) => {
                      return el.children
                        .map((subel: any) => {
                          return subel.code;
                        })
                        .join(",");
                    })
                    .join(",");
            const param = {
              url: item.url,
              name: item.value,
              nameField: item.xzqmc,
              codeField: item.xzqdm,
              type: this.regionValue.length,
              sqCodeList: sqCodeList
            };
            exportVue.$emit("area-select", param);
            return true;
          }
        });
      }
    }
  }
  changeRegion(data: any) {
    this.$store.commit("panel/setDialogShow", false);
    if (data.value == "city") {
      this.$store.commit("view/setRestoration", true);
      exportVue.$emit("area-select-city", this.regionConfig[0].url);
    } else {
      const sqCodeList =
        this.regionValue.length == 3
          ? data.code
          : this.regionValue.length == 2
          ? data.children
              .map((item: any) => {
                return item.code;
              })
              .join(",")
          : data.children
              .map((el: any) => {
                return el.children
                  .map((subel: any) => {
                    return subel.code;
                  })
                  .join(",");
              })
              .join(",");
      const param = {
        url: data.url,
        name: data.value,
        nameField: data.xzqmc,
        codeField: data.xzqdm,
        type: this.regionValue.length,
        sqCodeList: sqCodeList
      };
      exportVue.$emit("area-select", param);
    }
  }

  getGridList() {
    this.areaOptions = [];
    const param: any = {
      qykssj: this.datePickerValue[0],
      qyjssj: this.datePickerValue[1]
    };
    getGridList(param).then((res: any) => {
      const gridData: any[] = [];
      if (res?.data?.length > 0) {
        for (let i = 0; i < res.data.length; i++) {
          const item = res.data[i];
          if (item.list && item.list.length > 0) {
            for (let j = 0; j < item.list.length; j++) {
              const subItem = item.list[j];
              subItem.value = subItem.gridId;
              subItem.label = subItem.gridName;
              subItem.qjmc = item.areaName;
              gridData.push(subItem);
            }
          }
          item.children = item.list;
          item.value = item.areaName;
          item.label = item.areaName;
          this.areaOptions.push(item);
        }
        if (this.areaOptions.length > 0) {
          this.gridValue = [this.areaOptions[0].value];
          this.changeGrid(this.areaOptions[0]);
        }
        if (this.floorGridId) {
          for (let i = 0; i < this.areaOptions.length; i++) {
            const item = this.areaOptions[i];
            if (item.children) {
              for (let j = 0; j < item.children.length; j++) {
                const item2 = item.children[j];
                if (item2.gridId == this.floorGridId) {
                  this.gridValue = [item.areaName, item2.gridId];
                  this.changeGridValue();
                }
              }
            }
          }
          this.$store.commit("panelData/setFloorGridId", "");
        }
      }

      this.$store.commit("panelData/setGridData", gridData);
      if (this.datePickerValue == "") {
        this.$store.commit("panelData/setGridLastData", gridData);
      }
    });
  }

  changeGridValue() {
    this.$store.commit("panel/setDialogShow", false);
    if (this.gridValue.length > 0) {
      if (this.gridValue[0] == "厦门市") {
        this.$store.commit("view/setRestoration", true);
        exportVue.$emit("grid-select-city");
      } else if (this.gridValue.length == 1) {
        const qjmc = this.gridValue[0];
        exportVue.$emit("grid-select-qjmc", qjmc);
      } else {
        const wgid = this.gridValue[1];
        exportVue.$emit("grid-select", wgid);
      }
    }
  }
  changeGrid(data: any) {
    this.$store.commit("panel/setDialogShow", false);
    if (data.value == "厦门市") {
      this.$store.commit("view/setRestoration", true);
      exportVue.$emit("grid-select-city");
    } else if (data.value.includes("区")) {
      const qjmc = data.value;
      exportVue.$emit("grid-select-qjmc", qjmc);
    } else {
      exportVue.$emit("grid-select", data.value);
    }
  }
}
</script>

<style lang="scss" scoped>
.area-select {
  width: 428px;
  height: 36px;
  background-color: rgba(22, 88, 160, 0.18);
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding-left: 10px;
}
.area-type {
  width: 110px;
}
.area-value {
  margin: 0 20px;
  width: 294px;
}
</style>
<style lang="scss">
.area-select {
  .el-input__inner {
    background-color: #001022;
    border-radius: 4px;
    border: solid 1px #1658a0;
    font-family: AlibabaPuHuiTi_2_45_Light;
    font-size: 14px;
    line-height: 30px;
    color: #ffffff;
  }
  .el-select .el-input .el-select__caret {
    color: #ffffff;
    font-size: 16px;
  }
  .el-select .el-input.is-focus .el-input__inner {
    border-color: #1658a0;
  }
  .el-select .el-input__inner:focus {
    border-color: #1658a0;
  }
  .el-select:hover .el-input__inner {
    border-color: #1658a0;
  }
  .el-cascader .el-input .el-input__inner:focus,
  .el-cascader .el-input.is-focus .el-input__inner {
    border-color: #1658a0;
  }
  .el-cascader:not(.is-disabled):hover .el-input__inner {
    border-color: #1658a0;
  }

  .el-cascader .el-input .el-icon-arrow-down {
    transition: transform 0.3s;
    font-size: 14px;
  }
  .el-input--mini .el-input__icon {
    line-height: 28px;
  }
  .el-input__prefix,
  .el-input__suffix {
    color: #ffffff;
  }
}
.area-popper {
  font-size: 14px;
  font-family: AlibabaPuHuiTi_2_45_Light;
  border: none;
  background-color: rgba(11, 51, 93, 0.95);
  box-shadow: 0px 0px 8px 0px rgba(0, 19, 41, 0.8);
  border-radius: 4px;
  color: #fff;
  .popper__arrow {
    border-bottom-color: rgba(11, 51, 93, 0.95) !important;
    border-top-color: rgba(11, 51, 93, 0.95) !important;
  }
  .popper__arrow::after {
    border-bottom-color: rgba(11, 51, 93, 0.95) !important;
    border-top-color: rgba(11, 51, 93, 0.95) !important;
  }
  .el-cascader-menu {
    color: #fff;
    border-right: none;
  }
  .el-cascader-node.in-active-path,
  .el-cascader-node.is-active,
  .el-cascader-node.is-selectable.in-checked-path {
    font-family: AlibabaPuHuiTi_2_55_Regular;
    color: #3998ff;
  }
  .el-cascader-node:not(.is-disabled):focus,
  .el-cascader-node:not(.is-disabled):hover {
    background-color: transparent;
    background-size: 100% 100%;
    background-image: url(../../assets/images/panels/xialakuangxuanzhongshibeijing.png);
  }
  .el-icon-check:before {
    content: "";
  }
  .el-select-dropdown__item {
    font-size: 14px;
    font-family: AlibabaPuHuiTi_2_45_Light;
    color: #fff;
  }
  .el-select-dropdown__item.selected {
    color: #3998ff;
  }
  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    background-color: transparent;
    background-size: 240% 100%;
    background-repeat:no-repeat;
    background-image: url(../../assets/images/panels/xialakuangdaxuanzhongtiao.png);
  }
  .el-scrollbar {
    padding-bottom: 17px !important;
  }
  .el-scrollbar .el-scrollbar__wrap {
    margin-bottom: 0 !important;
    overflow-x: hidden !important;
  }
  .el-scrollbar__view {
    height: calc(100% - 20px);
  }
  .el-scrollbar__thumb {
    background-color: transparent;
  }
  .el-cascader-panel {
    .el-radio {
      width: 100%;
      height: 100%;
      z-index: 10;
      position: absolute;
      top: 10px;
      right: 10px;
    }
    .el-radio__input {
      visibility: hidden;
    }
    .el-cascader-node__postfix {
      top: 10px;
    }
  }
  .el-popover__title {
    font-size: 14px;
    font-family: AlibabaPuHuiTi_2_45_Light;
    color: #fff;
  }
}
</style>
